<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>
			<%= htmlWebpackPlugin.options.title %>
		</title>
		<style type="text/css">	
			
			/* Start the loader code, first, let's align it the center of screen */
			.loader {
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-mos-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				text-align:center;
			/* disable selection and cursor changes */
				-webkit-touch-callout: none;
			    -webkit-user-select: none;
			    -khtml-user-select: none;
			    -moz-user-select: none;
			    -ms-user-select: none;
			    user-select: none;
			    cursor:default;
			}
			
			/* Text align it the center of screen and connect the looped animation for 2 seconds */
			.text{
				position: absolute;
				left: -1.3em;
				top: -1.7em;
				-webkit-animation: text 2s infinite;
				-moz-animation: text 2s infinite;
				-moz-animation: text 2s infinite;
				-ms-animation: text 2s infinite;
				-o-animation: text 2s infinite;
				animation: text 2s infinite;
			}
			
			/* Set for the first layer vertical position */
			.vertical{
				position:absolute;
				top: -1.84em;
				left: -0.4em;
				-webkit-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				transform: rotate(90deg);
			}
			
			/* Set for the second layer horizontal position */
			.horizontal{
				position:absolute;
				top:0em;
				left:0em;
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);
			}
			
			/* The next two classes do mirror for animation */
			.circlesup{
				position:absolute;
				top: -4.7em;
				right: 12.1em;
			}
			
			.circlesdwn{
				position:absolute;
				top:2.5em;
				right:-13.5em;
				-webkit-transform: rotate(180deg);
				-moz-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-o-transform: rotate(180deg);
				transform: rotate(180deg);
			}
			
			/* Create a container for our circles, rotate it 45 degrees and set animation*/
			.circle {
				position: absolute;
				width: 15em;
				height: 15em;
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
				-webkit-animation: orbit 2s infinite;
				-moz-animation: orbit 2s infinite;
				-moz-animation: orbit 2s infinite;
				-ms-animation: orbit 2s infinite;
				-o-animation: orbit 2s infinite;
				animation: orbit 2s infinite;
				z-index:5;
			} 
			
			/* Style's of our circles */
			.circle:after {
				content: '';
				position: absolute;
				width: 2em;
				height: 2em;
				-webkit-border-radius: 100%;
				-moz-border-radius: 100%;
				-ms-border-radius: 100%;
				-o-border-radius: 100%;
				border-radius: 100%;
				background: #13A3A5; /* Pick a color 1*/
			}
			
			.circle:nth-child(2) {
				-webkit-animation-delay: 100ms; 
				-moz-animation-delay: 100ms; 
				-ms-animation-delay: 100ms; 
				-o-animation-delay: 100ms; 
				animation-delay: 100ms;
				z-index:4;
			}
			
			.circle:nth-child(2):after  {
				background: #56bebf; /* Pick a color 2*/
				-webkit-transform: scale(0.8,0.8);
				-moz-transform: scale(0.8,0.8);
				-ms-transform: scale(0.8,0.8);
				-o-transform: scale(0.8,0.8);
				transform: scale(0.8,0.8);
			}
			
			.circle:nth-child(3) {
				-webkit-animation-delay: 225ms; 
				-moz-animation-delay: 225ms; 
				-ms-animation-delay: 225ms; 
				-o-animation-delay: 225ms; 
				animation-delay: 225ms; 
				z-index:3;
			}
			
			.circle:nth-child(3):after  {
				background: #ffa489; /* Pick a color 3*/
				-webkit-transform: scale(0.6,0.6);
				-moz-transform: scale(0.6,0.6);
				-ms-transform: scale(0.6,0.6);
				-o-transform: scale(0.6,0.6);
				transform: scale(0.6,0.6);
			}
			
			.circle:nth-child(4) {
				-webkit-animation-delay: 350ms; 
				-moz-animation-delay: 350ms; 
				-ms-animation-delay: 350ms; 
				-o-animation-delay: 350ms; 
				animation-delay: 350ms; 
				z-index:2;
			}
			
			.circle:nth-child(4):after  {
				background: #ff6d37; /* Pick a color 4*/
				-webkit-transform: scale(0.4,0.4);
				-moz-transform: scale(0.4,0.4);
				-ms-transform: scale(0.4,0.4);
				-o-transform: scale(0.4,0.4);
				transform: scale(0.4,0.4);
			}
			
			
			.circle:nth-child(5) {
				-webkit-animation-delay: 475ms; 
				-moz-animation-delay: 475ms; 
				-ms-animation-delay: 475ms; 
				-o-animation-delay: 475ms; 
				animation-delay: 475ms; 
				z-index:1;
			}
			
			.circle:nth-child(5):after  {
				background: #DB2F00; /* Pick a color 5*/
				-webkit-transform: scale(0.2,0.2);
				-moz-transform: scale(0.2,0.2);
				-ms-transform: scale(0.2,0.2);
				-o-transform: scale(0.2,0.2);
				transform: scale(0.2,0.2);
			}
			
			/* Animation keys */
			@-webkit-keyframes orbit {
				0%		{ -webkit-transform:rotate(45deg); } 
			
				5%		{ -webkit-transform:rotate(45deg);
						  -webkit-animation-timing-function: ease-out; } 
			
				70%		{ -webkit-transform:rotate(405deg); 
						  -webkit-animation-timing-function: ease-in; }
			
				100%	{ -webkit-transform:rotate(405deg); } 
			}
			
			@-moz-keyframes orbit {
				0%		{ -moz-transform:rotate(45deg); } 
			
				5%		{ -moz-transform:rotate(45deg);
						  -moz-animation-timing-function: ease-out; } 
			
				70%		{ -moz-transform:rotate(405deg); 
						  -moz-animation-timing-function: ease-in; }
			
				100%	{ -moz-transform:rotate(405deg); } 
			}
			@-ms-keyframes orbit {
				0%		{ -ms-transform:rotate(45deg); } 
			
				5%		{ -ms-transform:rotate(45deg);
						  -ms-animation-timing-function: ease-out; } 
			
				70%		{ -ms-transform:rotate(405deg); 
						  -ms-animation-timing-function: ease-in; }
			
				100%	{ -ms-transform:rotate(405deg); } 
			}
			
			@-o-keyframes orbit {
				0%		{ -o-transform:rotate(45deg); } 
			
				5%		{ -o-transform:rotate(45deg);
						  -o-animation-timing-function: ease-out; } 
			
				70%		{ -o-transform:rotate(405deg); 
						  -o-animation-timing-function: ease-in; }
			
				100%	{ -o-transform:rotate(405deg); } 
			}
			
			@keyframes orbit { 
				0%		{ transform:rotate(45deg); } 
				
				5%		{ transform:rotate(45deg);
						  animation-timing-function: ease-out; } 
			
				70% 	{ transform:rotate(405deg); 
						  animation-timing-function: ease-in; }
			
				100%	{ transform:rotate(405deg); } 
			}
			
			
			@-webkit-keyframes text {
				0%		{-webkit-transform:scale(0.2,0.2);
						 -webkit-animation-timing-function: ease-out; } 
			
				40%,60%{ -webkit-transform:scale(1,1); 
						  -webkit-animation-timing-function: ease-out;  }
			
				70%,100%{ -webkit-transform:scale(0.2,0.2);  } 
			}
			
			@-moz-keyframes text {
				0%		{-moz-transform:scale(0.2,0.2);
						 -moz-animation-timing-function: ease-out; } 
			
				50%		{ -moz-transform:scale(1,1); 
						  -moz-animation-timing-function: ease-out;  }
			
				60%		{ -moz-transform:scale(1,1); 
						-moz-animation-timing-function: ease-out;  }
			
				100%	{ -moz-transform:scale(0.2,0.2);  } 	
			}
			
			@-mos-keyframes text {
				0%		{-mos-transform:scale(0.2,0.2);
						 -mos-animation-timing-function: ease-out; } 
			
				50%		{ -mos-transform:scale(1,1); 
						  -mos-animation-timing-function: ease-out;  }
			
				60%		{ -mos-transform:scale(1,1); 
						  -mos-animation-timing-function: ease-out;  }
			
				100%	{ -mos-transform:scale(0.2,0.2);  } 
			}
			
			@-o-keyframes text {
				0%		{ -o-transform:scale(0.2,0.2);
						  -o-animation-timing-function: ease-out; } 
			
				50%		{ -o-transform:scale(1,1); 
						  -o-animation-timing-function: ease-out;  }
			
				60%		{ -o-transform:scale(1,1); 
						  -o-animation-timing-function: ease-out;  }
			
				100%	{ -o-transform:scale(0.2,0.2);  } 
			}
			
			@keyframes text {
				0%		{ transform:scale(0.2,0.2);
						  animation-timing-function: ease-out; } 
			
				50%		{ transform:scale(1,1); 
						  animation-timing-function: ease-out;  }
			
				60%		{ transform:scale(1,1); 
						  animation-timing-function: ease-out;  }
			
				100%	{ transform:scale(0.2,0.2);  } 
			}

		</style>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script>
			var UA = window.navigator.userAgent.toLowerCase();
			var isAndroid = UA.indexOf('android') > 0;
			var isIOS = /iphone|ipad|ipod|ios/.test(UA);
			if (!(isAndroid || isIOS)) {
				// 正式发布的时候使用，开发期间不启用。
				// window.location.href = '/demo/news/website/pcguide.html';
			}
		</script>
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
			})
		</script>
		<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />
		<link rel="stylesheet" href="<%= BASE_URL %>common/style-1.css" />
		<link rel="stylesheet" href="<%= BASE_URL %>static/vue-multiselect/vue-multiselect.min.css"">
	</head>
	<body>
		<!-- 该文件为 H5 平台的模板 HTML，并非应用入口，请勿直接运行此文件。 -->
		<!-- 详见文档：https://uniapp.dcloud.io/collocation/manifest?id=h5-template -->
		<noscript>
			<strong>Please enable JavaScript to continue.</strong>
		</noscript>
		
		<div id="app"></div>
		<!-- built files will be auto injected -->
		<script>
			var _hmt = _hmt || [];
			(function() {
				var hm = document.createElement("script");
				hm.src = "https://hm.baidu.com/hm.js?fe3b7a223fc08c795f0f4b6350703e6f";
				var s = document.getElementsByTagName("script")[0];
				s.parentNode.insertBefore(hm, s);
			})();
		</script>
		
		<div id="appLoader" class="loader" style="z-index: 99999;position: absolute;left: 50%;top: 50%;display: none;">
			<div class="text">Loading...</div>
			<div class="horizontal">
			  <div class="circlesup">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
			  </div>
			  <div class="circlesdwn">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
			  </div>
			</div>
			<div class="vertical">
			  <div class="circlesup">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
			  </div>
			  <div class="circlesdwn">
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
					<div class="circle"></div>
			  </div>
			</div>
		</div>
	</body>
</html>
